<template>
  <div id="carousel" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <CarDot
      :FCurrentIndex="FCurrentIndex()"
      :currentIndex="currentIndex"
      :itemLen="itemLen"
      :dotBgColor="dotBgColor"
      :hasDot="hasDot"
      @dotClick="dotClick"
    ></CarDot>
    <CButton dir="prev" @dirClick="dirClick" :dotBgColor="dotBgColor" v-if="hasDirector">
      <template v-slot:prevButton v-if="$slots.prevButton">
        <slot name="prevButton"></slot>
      </template>
    </CButton>
    <CButton dir="next" @dirClick="dirClick" :dotBgColor="dotBgColor" v-if="hasDirector">
      <template v-slot:nextButton v-if="$slots.nextButton">
        <slot name="nextButton"></slot>
      </template>
    </CButton>
    <slot name="CarItem"></slot>
  </div>
</template>

<script>
import CButton from "./Button"
import CarDot from './CarDot'

import {reactive,getCurrentInstance,
toRefs,
onMounted, // 组件挂载完毕
onBeforeUnmount // 组件卸载之前
} from 'vue'
export default {
    name: "Carousel",
    components:{
        CButton,CarDot
    },
    props:{
        autoPlay: {
            type: Boolean,
            default: true
        },
        duration: { //自动播放时间
            type: Number,
            default: 3000
        },
        initial: { // 初始index
            type: Number,
            default: 0
        },
        hasDot: { //是否显示列表点
            type: Boolean,
            default: true
        },
        hasDirector: { // 是否显示按钮
            type: Boolean,
            default: true
        },
        dotBgColor: { //主题颜色
            type: String,
        }
    },
    setup(props,ctx){
        const instance = getCurrentInstance();
        const state = reactive({
            currentIndex:props.initial,
            itemLen:0,
            dir:""
        })
        let t = null; // 自动播放
        const autoPlay = () => {
            if(props.autoPlay){
                t=setInterval(()=>{
                    setIndex("next");
                },props.duration)
            }
        }

        const mouseEnter = () => { //鼠标移入
            _clearIntervalFn();
        }
        const mouseLeave = () => { //鼠标移出
            autoPlay();
        }

        const dirClick = (dir) => {
            state.dir = dir;
            setIndex(dir)
        }

        const dotClick = (arr) => {
             state.currentIndex = arr['index']
             state.dir = arr['dir']
        }

        const setIndex = (dir) => {
            switch (dir) { // 0开始  末尾为总数量-1
                case 'next':
                    state.currentIndex+=1
                    if(state.currentIndex >= state.itemLen){
                        state.currentIndex=0
                    }
                    break;
                case 'prev':
                    state.currentIndex-=1
                    if(state.currentIndex <=-1 ){
                        state.currentIndex = state.itemLen-1
                    }
                    break;
                default: break;
            }
        }
        
        const getItemLen = () =>{
            return instance.slots.CarItem()[0].children[0].children.length;    
        }

        const FCurrentIndex = ()=>{
            ctx.emit("FCurrentIndex",state.currentIndex);
        }

        onMounted(() =>{// 组件挂载完成  渲染完成
            state.itemLen=getItemLen();
            autoPlay();
        })
        
        onBeforeUnmount(() => {
            _clearIntervalFn();
        });

        function _clearIntervalFn() { // 函数内部方法
            clearInterval(t); // 清除计时器
            t = null;
        }
        return {
            ...toRefs(state),
            dirClick,dotClick,mouseEnter,mouseLeave,getItemLen,FCurrentIndex
        }
    }
}
</script>

<style lang="scss" scoped>
#carousel {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>